<template>
  <div class="contain_box">
    <div class="jianzhu">
      <img src="../assets/建筑.png"
           alt="">
    </div>
    <div class="jianzhuguanghuan1">
      <img src="../assets/建筑光环2.png"
           alt="">
    </div>
    <div class="jianzhuguanghuansan"></div>
    <div class="jianzhuguanhuang2">
      <img src="../assets/建筑光环1.png"
           alt="">
    </div>
    <div class="dibuguoduse">
      <img src="../assets/底部过渡色.png"
           alt="">
    </div>
    <div class="jianzhuguanghuan3">
      <img src="../assets/建筑光环3.png"
           alt="">
    </div>
    <div class="loginbox">
      <div class="icon">
        <a href="https://www.sicau.edu.cn/"><img src="../assets/icon.png"
               alt=""></a>
      </div>
      <el-form ref="loginform"
               :rules="rules"
               :model="loginform">
        <el-form-item label="用户名"
                      prop="id">
          <el-input v-model="loginform.id"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="passwd">
          <el-input v-model="loginform.passwd"
                    show-password></el-input>
        </el-form-item>
        <el-form-item label="验证码"
                      prop="captcha">
          <el-input v-model="loginform.captcha"></el-input>
        </el-form-item>
        <el-form-item>
          <img @click="clickCaptcha"
               :src="imgUrl"
               alt="">
        </el-form-item>

        <div class="loginbutton">
          <el-form-item>
            <el-button type="primary"
                       @click="login">登录</el-button>
            <div class="password">
              <el-checkbox v-model="isSavePassword">记住密码</el-checkbox>
              <el-button type="text">忘记密码</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>

    </div>
    <div class="copyrightbox">
      <div class="copyright">
        技术支持@ 三芯工作室
      </div>
    </div>

  </div>
</template>

<script>

import { userLogin } from '@/api/sso/user'
import { getCpc } from '@/api/sso/cpc'

export default {
  name: "login",

  data () {
    return {
      // 记住密码
      isSavePassword: false,
      // 图片地址
      imgUrl: "",
      // 登录表单
      loginform: {
        id: "xiyanaaaa",
        passwd: "9464653473df", //正确的使用方式是SHA512用户密码再传输
        captcha: ""
      },
      // 验证规则
      rules: {
        id: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        passwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ]
      },

    }
  },
  methods: {

    /**
     * @description: 点击验证码，获取新的验证码
     * @param {*}
     * @return {*}
     */
    async clickCaptcha () {
      let data = await getCpc()
      this.imgUrl = window.URL.createObjectURL(data)
    },
    /**
     * @description: 校验表单数据、登录
     * @param {*}
     * @return {*}
     */
    login () {
      let that = this
      this.$refs.loginform.validate().then(async () => {

        let data = await userLogin(this.loginform);
        if (data == "OK") {
          that.$message({
            type: "success",
            message: "登陆成功"
          })
          that.$router.push({ path: "/home" })

        }

      }).catch(function () {

      })

    }
  },
  mounted () {
    let hh = document.body.offsetHeight
    document.querySelector(".contain_box").style.height = hh + 'px'
  },
  created () {
    this.clickCaptcha()
  }

}
</script>

<style lang="less" scoped>
.jianzhu {
  text-align: right;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 2;
  img {
    width: 51.85rem;
    height: 38.65rem;
  }
}
.jianzhuguanghuan1 {
  position: absolute;
  right: 0rem;
  bottom: 15rem;
  text-align: right;
  z-index: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 1700ms;
  -webkit-animation-delay: 100ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  img {
    width: 44.5rem;
    height: 37.9rem;
  }
}
.jianzhuguanhuang2 {
  position: absolute;
  right: 32rem;
  bottom: 7rem;
  z-index: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 1600ms;
  -webkit-animation-delay: 300ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  img {
    width: 27.85rem;
    height: 19.75rem;
  }
}
.dibuguoduse {
  position: absolute;
  bottom: 0rem;
  left: 0rem;
}
.jianzhuguanghuan3 {
  position: absolute;
  right: 22.5rem;
  bottom: 2.5rem;
  z-index: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 1500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  img {
    width: 23.45rem;
    height: 29.25rem;
  }
}
.contain_box {
  width: 95.15rem;
  background-image: url("../assets/背景.png");
  background-size: 95.15rem 100%;
  background-repeat: no-repeat;
  position: relative;
  .loginbox {
    position: absolute;
    top: 13.15rem;
    left: 5rem;
    width: 29.65rem;
    height: 26.95rem;
    z-index: 3;
    .icon {
      text-align: left;
      img {
        width: 35.4em;
        height: 7rem;
      }
    }
    .loginbutton {
      .el-form-item {
        :deep(.el-form-item__content) {
          position: relative;
          .el-button--primary {
            position: absolute;
            left: 0rem;
            width: 7.05rem;
            height: 2.6rem;
            background-color: #238c83;
            border-color: #238c83;
            border-radius: 0.4rem;
            &:hover {
              background-color: #3a9b92;
              border-color: #3a9b92;
            }
          }
          .password {
            position: absolute;
            right: 0rem;
            .el-checkbox {
              color: #a5b9bc;
              &:hover {
                color: #89aeb4;
              }
            }
            .el-button--text {
              margin-left: 2.5rem;
              color: #a5b9bc;
              &:hover {
                color: #89aeb4;
              }
            }
          }
        }
      }
    }
    .el-form-item {
      width: 28.5rem;
      margin-top: 1rem;
      .el-form-item__label {
        color: #bec8cb;
      }
      .el-form-item__content {
        .el-input {
          :deep(.el-input__inner) {
            border: 0px;
            border-bottom: 1px solid #6d848c;
            background-color: transparent;
            border-radius: 0px;
          }
        }
      }
    }
  }
}
.copyrightbox {
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: flex-end;
  .copyright {
    z-index: 2;
    background-color: transparent;
    color: #fff;
  }
}

@-webkit-keyframes breathe {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
</style>
